<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/02.css">
</head>

<body>
    <header>
        <i class="iconfont icon-zuojiantou"></i>
        <span>商品列表</span>
    </header>

    <main>
    </main>

    <footer>
        <div class="btn">
            <i class="iconfont icon-liebiao"></i>
            <span>列表</span>
        </div>
        <div class="btn">
            <i class="iconfont icon-tianjia"></i>
            <span>添加</span>
        </div>
    </footer>

    <script src="./http.js"></script>
    <script>

        let mainDom = document.querySelector('main')

        http.get('http://8.137.157.16:9000/goods/list', { params: { userId: '1' } }, function (res) {

            res.data.forEach(function (item, index) {
                let list = document.createElement('div')
                list.className = 'item'

                console.log(item);

                list.innerHTML = `
            <img src="${item.img}" alt="">
            <div class="text">
                <div class="name">
                    <span id="title">${item.title}</span>
                </div>
                <div>
                    <span id="descText">${item.desc_text}</span>
                    <span class="price">￥<em class="price-int">${item.current_price}</em></span>
                </div>
                <div class="del" onclick="del(${item.id})">
                    <span>删除</span>
                </div>`
                mainDom.appendChild(list)
            });
        })

        function del(id) {
            const data = {
                userId: '1',
                goodsId: id
            }
            http.post('http://8.137.157.16:9000/goods/del', data, function (res) {
                console.log(res);
            })
        }

    </script>
</body>

</html>